<template>
	<view :style="{ backgroundColor: bgColor }" class="search-box">
		<image style="height: 36rpx;width: 36rpx;margin-left: 10rpx;"
			src="http://jiaoyukehu.oss-cn-beijing.aliyuncs.com/static/home/ic_search.png" mode=""></image>
		<view style="display: flex;justify-content: space-between;">
			<input type="text" style="margin-left: 15rpx;font-size: 30rpx;" :placeholder="placeholder || '搜索'"
				v-model="keyword">
			<view @click="$emit('blur',keyword)" class="search-btn flex flex-center color-w font32">
				搜索
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, onMounted } from 'vue'
	const keyword = ref('')
	const props = defineProps({
		bgColor: {
			type: String,
			default: '#fff'
		},
		placeholder: {
			type: String,
			default: ''
		},
		showButton: {
			type: Boolean,
			default: false
		},
		word: {
			type: String,
			default: ''
		}
	})
	onMounted(() => {
		keyword.value = props.word
	})
</script>

<style lang="scss" scoped>
	.search-box {
		height: 10%;
		display: flex;
		align-items: center;
		padding: 10rpx;
		border-radius: 50rpx;
	}

	.search-btn {
		margin-left: 200rpx;
		width: 120rpx;
		// background: #3FA897;
		border-radius: 50rpx;
		background-image: linear-gradient(180deg, #16cdab 0%, #1cb696 100%);
	}
</style>